<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="navbar">
      <navgatsmy :images="img"/>
    </view>

    <!-- 选项卡 -->
    <view class="tabs">
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 0 }" 
        @click="switchTab(0)"
      >
        <view class="tab-inner">所有</view>
      </view>
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 1 }" 
        @click="switchTab(1)"
      >
        <view class="tab-inner">已结束</view>
      </view>
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 2 }" 
        @click="switchTab(2)"
      >
        <view class="tab-inner">参与记录</view>
      </view>
    </view>
    <view class="tab-indicator" :style="{ left: indicatorLeft + 'px' }"></view>

    <!-- 内容区域 -->
    <view class="content">
      <!-- 所有ROLL房 -->
      <view class="tab-content" v-if="currentTab === 0">
        <view class="roll-item" v-for="(item, index) in allRolls" :key="index" @click="gotoRollDetail(item.id)">
          <!-- 顶部信息：头像、名字和剩余时间 -->
          <view class="roll-header">
            <view class="host-info">
              <view class="host-avatar">
                <image :src="item.user.avatar" mode="aspectFill"></image>
              </view>
              <view class="host-details">
                <view class="host-name">{{ item.user.name }}</view>
                <view class="host-description">{{ item.name || '房主' }}</view>
              </view>
            </view>
            <view class="time-remaining">
              <i class="fa fa-clock-o"></i>
              <span>截止至:{{ item.end_time }}</span>
            </view>
          </view>
          
          <!-- 饰品列表：横向排列 -->
          <view class="items-container">
            <scroll-view class="items-scroll">
              <view class="items-list">
                <view class="item-card" v-for="(skin, sIndex) in item.awards" :key="sIndex">
                  <view class="skin-img">
                    <image style="width: 100%;height: 100%;" :src="skin.box_record.cover" mode="aspectFill"></image>
                    <!-- 左下角信息 -->
                    <view class="skin-info-bottom">
						<view class="skin-quality">{{ skin.box_record.dura_alias || '无' }}</view>
                      <view class="skin-name">{{ skin.box_record.name }}</view>
                      
                    </view>
                    <!-- 右上角信息 -->
                    <view class="skin-info-top">
						<view class="skin-price">¥{{ skin.bean }}</view>
                    </view>
                  </view>
                </view>
              </view>
            </scroll-view>
          </view>
          
          <!-- 统计信息：总道具数、总人数、总金额 -->
          <view class="stats-bar">
            <view class="stat-item">
              <view class="stat-label">
                <i class="fa fa-cube"></i>
                <span>总道具</span>
              </view>
              <view class="stat-value">{{ item.awards_count }}个</view>
            </view>
            <view class="stat-item">
              <view class="stat-label">
                <i class="fa fa-users"></i>
                <span>参与</span>
              </view>
              <view class="stat-value">{{ item.status }}人</view>
            </view>
            <view class="stat-item">
              <view class="stat-label">
                <i class="fa fa-rmb"></i>
                <span>总价值</span>
              </view>
              <view class="stat-value">¥{{ item.award_bean }}</view>
            </view>
          </view>
          
          <!-- 底部加入按钮 -->
          <view class="roll-footer">
            <view class="join-btn" @click.stop="joinRoll(item.id)">
              <!-- 加入ROLL房 -->
            </view>
          </view>
        </view>
      </view>

      <!-- 已结束ROLL房 -->
      <view class="tab-content" v-if="currentTab === 1">
        <view class="roll-item" v-for="(item, index) in endedRolls" :key="index" @click.stop="joinRoll(item.id)">
          <view class="roll-header">
            <view class="host-info">
              <view class="host-avatar">
                <image :src="item.user.avatar" mode="aspectFill"></image>
              </view>
              <view class="host-details">
                <view class="host-name">{{ item.user.name }}</view>
                <view class="host-description">{{ item.name || '房主' }}</view>
              </view>
            </view>
            <view class="time-remaining ended">
              <i class="fa fa-check-circle"></i>
              <span>已结束</span>
            </view>
          </view>
          
          <view class="items-container">
            <scroll-view class="items-scroll">
              <view class="items-list">
                <view class="item-card" v-for="(skin, sIndex) in item.awards" :key="sIndex">
                  <view class="skin-img">
                    <image :src="skin.box_record.cover" mode="aspectFill"></image>
                    <!-- 左下角信息 -->
                    <view class="skin-info-bottom">
                      <view class="skin-name">{{ skin.box_record.name }}</view>
                      <view class="skin-price">¥{{ skin.bean }}</view>
                    </view>
                    <!-- 右上角信息 -->
                    <view class="skin-info-top">
                      <view class="skin-quality">{{ skin.box_record.dura_alias || '无' }}</view>
                    </view>
                  </view>
                </view>
              </view>
            </scroll-view>
          </view>
          
          <view class="stats-bar">
            <view class="stat-item">
              <view class="stat-label">
                <i class="fa fa-cube"></i>
                <span>总道具</span>
              </view>
              <view class="stat-value">{{ item.awards_count }}个</view>
            </view>
            <view class="stat-item">
              <view class="stat-label">
                <i class="fa fa-users"></i>
                <span>参与</span>
              </view>
              <view class="stat-value">{{ item.join_number }}人</view>
            </view>
            <view class="stat-item">
              <view class="stat-label">
                <i class="fa fa-rmb"></i>
                <span>总价值</span>
              </view>
              <view class="stat-value">¥{{ item.award_bean }}</view>
            </view>
          </view>
          
          <!-- 已结束显示获奖者信息 -->
          <view class="roll-footer ended">
            <view class="winner-info">
              <i class="fa fa-trophy"></i>
              <span>获奖者: {{ item.winnerName }}</span>
            </view>
          </view>
        </view>
      </view>

      <!-- 参与记录 -->
      <view class="tab-content" v-if="currentTab === 2">
        <view class="roll-item" v-for="(item, index) in myRecords" :key="index" @click="gotoRollDetail(item.id)">
          <!-- 顶部信息：头像、名字和剩余时间 -->
          <view class="roll-header">
            <view class="host-info">
              <view class="host-avatar">
                <image :src="item.user.avatar" mode="aspectFill"></image>
              </view>
              <view class="host-details">
                <view class="host-name">{{ item.user.name }}</view>
                <view class="host-description">{{ item.name || '房主' }}</view>
              </view>
            </view>
            <view class="time-remaining">
              <i class="fa fa-clock-o"></i>
              <span>{{ item.end_time }}</span>
            </view>
          </view>
          
          <!-- 饰品列表：横向排列 -->
          <view class="items-container">
            <scroll-view class="items-scroll">
              <view class="items-list">
                <view class="item-card" v-for="(skin, sIndex) in item.awards" :key="sIndex">
                  <view class="skin-img">
                    <image style="width: 100%;height: 100%;" :src="skin.box_record.cover" mode="aspectFill"></image>
                    <!-- 左下角信息 -->
                    <view class="skin-info-bottom">
                      <view class="skin-quality">{{ skin.box_record.dura_alias || '无' }}</view>
                      <view class="skin-name">{{ skin.box_record.name }}</view>
                      
                    </view>
                    <!-- 右上角信息 -->
                    <view class="skin-info-top">
                      <view class="skin-price">¥{{ skin.bean }}</view>
                    </view>
                  </view>
                </view>
              </view>
            </scroll-view>
          </view>
          
          <!-- 统计信息：总道具数、总人数、总金额 -->
          <view class="stats-bar">
            <view class="stat-item">
              <view class="stat-label">
                <i class="fa fa-cube"></i>
                <span>总道具</span>
              </view>
              <view class="stat-value">{{ item.awards_count }}个</view>
            </view>
            <view class="stat-item">
              <view class="stat-label">
                <i class="fa fa-users"></i>
                <span>参与</span>
              </view>
              <view class="stat-value">{{ item.status }}人</view>
            </view>
            <view class="stat-item">
              <view class="stat-label">
                <i class="fa fa-rmb"></i>
                <span>总价值</span>
              </view>
              <view class="stat-value">¥{{ item.award_bean }}</view>
            </view>
          </view>
          
          <!-- 底部加入按钮 -->
          <view class="roll-footer">
            <!-- <view class="join-btn" @click.stop="joinRoll(item.id)">
             
            </view> -->
          </view>
        </view>
      </view>
    </view>

    <!-- 分页器 -->
    <view class="pagination" v-if="showPagination">
      <button 
        class="page-btn" 
        @click="changePage(currentPage - 1)"
        :disabled="currentPage <= 1"
      >
        上一页
      </button>
      <view class="page-info">
        第{{ currentPage }}页 / 共{{ totalPages }}页
      </view>
      <button 
        class="page-btn" 
        @click="changePage(currentPage + 1)"
        :disabled="currentPage >= totalPages"
      >
        下一页
      </button>
    </view>

    <!-- 空状态提示 -->
    <view class="empty-state" v-if="isEmpty">
      <i class="fa fa-inbox"></i>
      <text>暂无相关ROLL房记录</text>
    </view>
    
    <!-- 加载中提示 -->
    <view class="loading-state" v-if="isLoading">
      <i class="fa fa-spinner fa-spin"></i>
      <text>加载中...</text>
    </view>
  </view>
</template>

<script>
import {
  getROllListthree,
  getUserRooms,
  getRoomsList
} from "../../api/outOfTheFree/index.js"
import navgatsmy from "../../Component/navgatsmy/navgatsmy.vue"

export default {
  data() {
    return {
		img:"https://img.jingkakeji.com/img/static/Roll.png",
      currentTab: 0,
      indicatorLeft: 0,
      tabWidth: 0,
      isEmpty: false,
      isLoading: false,
      
      // 分页相关
      currentPage: 1,
      totalPages: 1,
      showPagination: false,
      
      // 所有ROLL房数据
      allRolls: [],
      
      // 已结束ROLL房数据
      endedRolls: [],
      
      // 参与记录数据
      myRecords: []
    };
  },
  components:{
    navgatsmy  
  },
  onLoad() {
    // 计算选项卡宽度和指示器位置
    const that = this;
    uni.getSystemInfo({
      success: function(res) {
        // 选项卡宽度 = 屏幕宽度 / 选项卡数量
        that.tabWidth = res.windowWidth / 3;
        that.indicatorLeft = 0;
      }
    });
  },
  
  onShow() {
    // 页面显示时加载当前选项卡数据
    this.switchTab(this.currentTab);
  },
  
  methods: {
    // 切换选项卡
    switchTab(index) {
      this.currentTab = index;
      this.indicatorLeft = this.tabWidth * index;
      this.currentPage = 1; // 切换选项卡时重置为第一页
      
      // 根据选项卡加载对应数据
      switch(index) {
        case 0:
          this.rollcans(1, 0); // 所有
          break;
        case 1:
          this.rollcans(1, 1); // 已结束
          break;
        case 2:
          this.loadMyRecords(1); // 参与记录
          break;
      }
    },
    
    // 加载所有/已结束数据
    async rollcans(page, type) {
      this.isLoading = true;
      this.isEmpty = false;
      this.showPagination = false;
      
      try {
        const res = await getRoomsList(page, type);
        console.log(type === 0 ? "所有ROLL房数据" : "已结束ROLL房数据", res);
        
        // 更新数据
        if (type === 0) {
          this.allRolls = res.data.data || [];
        } else {
          this.endedRolls = res.data.data || [];
        }
        
        // 更新分页信息
        this.totalPages = res.data.last_page || 1;
        this.currentPage = page;
        this.showPagination = this.totalPages > 1;
        
        // 检查空状态
        this.checkEmptyState();
      } catch (error) {
        console.error("加载数据失败:", error);
        uni.showToast({
          title: '加载失败',
          icon: 'none',
          duration: 2000
        });
      } finally {
        this.isLoading = false;
      }
    },
    
    // 加载参与记录
    async loadMyRecords(page) {
      this.isLoading = true;
      this.isEmpty = false;
      this.showPagination = false;
      
      try {
        const res = await getUserRooms(page);
        console.log("参与记录数据", res);
        
        // 更新数据
        this.myRecords = res.data.data || [];
        
        // 更新分页信息
        this.totalPages = res.data.last_page || 1;
        this.currentPage = page;
        this.showPagination = this.totalPages > 1;
        
        // 检查空状态
        this.checkEmptyState();
      } catch (error) {
        console.error("加载参与记录失败:", error);
        uni.showToast({
          title: '加载失败',
          icon: 'none',
          duration: 2000
        });
      } finally {
        this.isLoading = false;
      }
    },
    
    // 切换分页
    changePage(page) {
      if (page < 1 || page > this.totalPages) return;
      
      // 根据当前选项卡加载对应页数据
      switch(this.currentTab) {
        case 0:
          this.rollcans(page, 0);
          break;
        case 1:
          this.rollcans(page, 1);
          break;
        case 2:
          this.loadMyRecords(page);
          break;
      }
      
      // 滚动到顶部
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300
      });
    },
    
    // 检查空状态
    checkEmptyState() {
      switch(this.currentTab) {
        case 0:
          this.isEmpty = this.allRolls.length === 0 && !this.isLoading;
          break;
        case 1:
          this.isEmpty = this.endedRolls.length === 0 && !this.isLoading;
          break;
        case 2:
          this.isEmpty = this.myRecords.length === 0 && !this.isLoading;
          break;
      }
    },
    
    // 前往ROLL房详情
    gotoRollDetail(id) {
      uni.navigateTo({
        url: `/pages/rollDetail/rollDetail?id=${id}`
      });
    },
    
    // 加入ROLL房
    joinRoll(id) {
		console.log(id)
      // 阻止事件冒泡，避免同时触发卡片点击
      // 实际项目中这里会处理加入逻辑
      uni.showToast({
        title: '加入ROLL房成功',
        icon: 'success',
        duration: 2000
      });
	  uni.navigateTo({
	  	url:`/pages/roll/rollxq/rollxq?id=${id}`
	  })
    }
  }
};
</script>

<style scoped>
.container {
  min-height: 100vh;
  background-color: #1a1a2e;
  background-image: url("https://img.jingkakeji.com/img/static/huabanone.png");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: #fff;
}

/* 导航栏样式 */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  background-color: rgba(20, 20, 35, 0.8);
  backdrop-filter: blur(5px);
  position: relative;
  z-index: 10;
}

/* 选项卡样式 */
.tabs {
  display: flex;
  flex-direction: row;
  margin-top: 55rpx;
  width: 100%;
  height: 68rpx;
  backdrop-filter: blur(5px);
  position: relative;
  z-index: 10;
  justify-content: center;
  gap: 20rpx;
}

.tab-item {
  /* flex: 1; */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 218rpx;
  height: 68rpx;
  position: relative;
  transition: all 0.3s ease;
  background: url("https://img.jingkakeji.com/img/static/roll/tabroll.png");
  /* 确保图片不平铺 */
  background-repeat: no-repeat;
  
  /* 让图片居中显示 */
  background-position: center;
  
  /* 关键属性：让图片覆盖整个容器，保持比例，可能裁剪部分图片 */
  background-size: cover;
}

.tab-inner {
  width: 218rpx;
  height: 68rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: #FFFFFF;
  transition: all 0.3s ease;
}

.tab-item.active .tab-inner {
  color: #7869DA;
  font-weight: 500;
  background: url("https://img.jingkakeji.com/img/static/roll/tabrolls.png");
  /* 确保图片不平铺 */
  background-repeat: no-repeat;
  
  /* 让图片居中显示 */
  background-position: center;
  
  /* 关键属性：让图片覆盖整个容器，保持比例，可能裁剪部分图片 */
  background-size: cover;
}

.tab-indicator {
  position: absolute;
  bottom: 0;
  width: 33.333%;
  height: 3px;
  /* background-color: #ff4757; */
  transition: left 0.3s ease;
}

/* 内容区域样式 */
.content {
  padding: 16px;
  position: relative;
  z-index: 5;
}

.tab-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ROLL房项样式 */
.roll-item {
  /* border-radius: 8px; */
  width: 696rpx;
  height: 446rpx;
  overflow: hidden;
  backdrop-filter: blur(5px);
  /* border: 1px solid rgba(255, 255, 255, 0.05); */
  transition: all 0.3s ease;
  background: url("https://img.jingkakeji.com/img/static/roll/rollbg.png");
  
 /* 确保图片不平铺 */
 background-repeat: no-repeat;
 
 /* 让图片居中显示 */
 background-position: center;
 
 /* 关键属性：让图片覆盖整个容器，保持比例，可能裁剪部分图片 */
 background-size: cover;
}

.roll-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.1);
}

/* 顶部信息区 */
.roll-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.host-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.host-avatar {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.1);
}

.host-avatar image {
  width: 100%;
  height: 100%;
}

.host-details {
  display: flex;
  flex-direction: column;
  gap: 2rpx;
}

.host-name {
  font-size: 14px;
  font-weight: 500;
  color: #31296A;
}

.host-description {
  font-size: 12px;
  color: #999;
}

.time-remaining {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #2ed573;
  padding: 4px 10px;
  background-color: rgba(46, 213, 115, 0.1);
  border-radius: 15px;
  max-width: 200rpx;
  overflow: hidden;
  white-space: nowrap;
}

.time-remaining span {
  white-space: nowrap;
  display: inline-block;
  animation: scroll-text 4s linear infinite;
}

@keyframes scroll-text {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.time-remaining.ended {
  color: #747d8c;
  background-color: rgba(116, 125, 140, 0.1);
}

/* 饰品列表区域 */
.items-container {
  /* padding: 16px; */
  padding-left: 16rpx;
  padding-right: 16rpx;
}

.items-scroll {
  width: 100%;
  white-space: nowrap;
}

.items-list {
	width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.item-card {
  width: 198rpx;
  height: 144rpx;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  background-color:#D9D8EC ;
}

.skin-img {
  width: 100%;
  height: 100%;
  position: relative;
}

.skin-img image {
  width: 100%;
  height: 100%;
}

/* 左下角信息 */
.skin-info-bottom {
  position: absolute;
  bottom: 4rpx;
  left: 4rpx;
  right: 4rpx;
  /* background: rgba(0, 0, 0, 0.6); */
  padding: 2rpx 4rpx;
  border-radius: 4rpx;
}

.skin-name {
  font-size: 18rpx;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.skin-price {
  font-size: 16rpx;
  color: #ffa502;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2rpx;
}

/* 右上角信息 */
.skin-info-top {
  position: absolute;
  top: 4rpx;
  right: 4rpx;
}

.skin-quality {
  /* background: rgba(0, 0, 0, 0.6); */
  color: #fff;
  font-size: 16rpx;
  padding: 2rpx 6rpx;
  border-radius: 4rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60rpx;
}

/* 统计信息栏 */
.stats-bar {
  display: flex;
  height: 50rpx;
  justify-content: space-between;
  padding: 10px 16px;
  /* background-color: rgba(20, 20, 35, 0.3);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05); */
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rpx;
  font-size: 13px;
  color: #ccc;
}

.stat-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #7B7A8D;
}

.stat-value {
  font-size: 14px;
  color: #31296A;
  font-weight: 500;
}

/* 底部按钮区域 */
.roll-footer {
  padding: 20rpx;
  display: flex;
  justify-content: center;
}

.join-btn {
  width: 356rpx;
  height: 72.2rpx;
  background-color: #ff4757;
  color: #fff;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  border: none;
  transition: all 0.2s ease;
  background: url("https://img.jingkakeji.com/img/static/roll/letsgo.png");
  /* 确保图片不平铺 */
  background-repeat: no-repeat;
  
  /* 让图片居中显示 */
  background-position: center;
  
  /* 关键属性：让图片覆盖整个容器，保持比例，可能裁剪部分图片 */
  background-size: cover;
  
  /* 固定背景，滚动页面时背景不动 */
  /* background-attachment: fixed; */
}


.winner-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #2ed573;
  font-weight: 500;
}

.result-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  width: 100%;
  justify-content: center;
  padding: 10px 0;
}

.result-info i.fa-trophy {
  color: #ffa502;
}

.result-info i.fa-flag {
  color: #747d8c;
}

/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #888;
  text-align: center;
}

.empty-state i {
  font-size: 48px;
  margin-bottom: 16px;
  color: #555;
}

/* 加载中样式 */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #888;
}

.loading-state i {
  font-size: 36px;
  margin-bottom: 16px;
}

/* 分页器样式 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 16px;
  gap: 16px;
}

.page-btn {
  padding: 6px 16px;
  background-color: rgba(30, 30, 50, 0.85);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  font-size: 14px;
}

.page-btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}

.page-info {
  font-size: 14px;
  color: #ccc;
}
</style>